<!-- 1 定义组件模版 -->
<template>
    <div class="goodsApp">
        进货信息
        <fieldset>
            <legend>商品名称:</legend>
            <input type="text" v-model="name" />
        </fieldset>
        <fieldset>
            <legend>商品单价:</legend>
            <input type="text" v-model="price" />
        </fieldset>
        <fieldset>
            <legend>数量:</legend>
            <button type="button" style="border-radius: 2px; background-color: rgb(144, 156, 166);padding: 5px;"
                @click="increament(1)">+</button>

            <input type="text" v-model="count" />

            <button type="button" style="border-radius: 2px; background-color: rgb(144, 156, 166);padding: 5px;"
                @click="increament(-1)">-</button>
        </fieldset>
        <fieldset>
            <legend>商品总价:</legend>
            {{ amount }}
        </fieldset>
    </div>
</template>

<!-- 2 定义组件逻辑 -->
<script setup lang="ts" name="PiniaDemo1">
import { computed, ref, toRefs } from 'vue';
// import { useCart } from '@/store/cart'
import { useCart } from '@/store/cartSetup'

import { storeToRefs } from 'pinia'

//使用Pinia框架
let cartStore = useCart();

console.log("cartStore", cartStore);



// 定义泛型

let { name, count, price, amount } = storeToRefs(cartStore);


//计算属性
// let amount = computed(() => {
//     return (price.value * count.value).toFixed(2)
// })

function increament(num: number) {

    //1 直接使用赋值语句 修改  pinia中的数据
    count.value += num
}




//使用 cartStore 需要观察数据的变化， 一旦变化   cartStore -- localStorage

// cartStore.$subscribe((mutation, state) => {
//     console.log("mutation", mutation);
//     console.log("state", state);
//     //sessionStriage -- 会话级别，  关闭浏览器小时


//     //localStorage --本地存储，长期
//     localStorage.setItem("cartStoreState", JSON.stringify(state))
// })

</script>

<!-- 3 定义样式 -->
<style scoped>
.goodsApp {
    width: 500px;
}


input[count] {
    width: 40px;
    text-align: center;
}
</style>